<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()"/>
        </div>
        <div class="head-search">教育经历</div>
        <div @click="saveEducation">保存</div>
      </div>
    </div>
    <div class="content">
      <div class="inpBox">
        <span>毕业院校</span>
        <div>
          <input type="text" v-model="ycUserEducation.school" placeholder="请输入学校名称"/>
        </div>
      </div>
      <div class="inpBox">
        <span>所属专业</span>
        <div>
          <input type="text" v-model="ycUserEducation.professional" placeholder="请输入专业名称"/>
        </div>
      </div>
      <div class="inpBox">
        <span>入学时间</span>
        <div>
          <input type="date" v-model="ycUserEducation.admissionTime" placeholder="请输入入学时间"/>
        </div>
      </div>
      <div class="inpBox">
        <span>毕业时间</span>
        <div>
          <input type="date" v-model="ycUserEducation.graduationTime" placeholder="请输入毕业时间"/>
        </div>
      </div>
      <div class="inpBox">
        <span>学历学位</span>
        <div @click="prop()">
          <input type="text" v-model="eduValue2" placeholder="请选择工学历学位" readonly/>
        </div>
      </div>
      <mt-popup v-model="eduIf" position="bottom">
        <p class="mt-p">
          <span @click="off()">取消</span> 请选择学历学位
          <span @click="on()">确定</span>
        </p>
        <mt-picker
          :slots="eduLimit"
          @change="eduChange"
          value-key="eduBgd"
          class="picker"
        ></mt-picker>
      </mt-popup>
      <div class="inpBoxs">
        <div class="inpBox">
          <span>教育简介</span>
          <div style="color:#757575">选填</div>
        </div>
        <textarea name="" id="" placeholder="请描述你的个人经历..." v-model="ycUserEducation.description"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'

var eduValue = ''
export default {
  inject: ['reload'],
  name: 'work',
  components: {},
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.init()
  },
  mounted () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data () {
    return {
      eduValue2: '',
      eduLimit: [
        {
          values: []
        }
      ],
      eduValue: '',
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      resumeId: '',
      name: '',
      post: '',
      time: '',
      text: '',
      study: '',
      eduIf: false,
      ycUserEducation: {
        id: 0,
        school: '',
        eduBgd: '',
        professional: '',
        admissionTime: '',
        graduationTime: '',
        description: ''

      }
    }
  },
  // methods 编写js函数
  methods: {
    eduChange (picker, values) {
      this.eduValue2 = values[0].eduBgd
      this.ycUserEducation.eduBgd = values[0].id
    },
    on () {
      this.eduValue = eduValue
      this.eduIf = false
    },
    off () {
      eduValue = ''
      this.eduIf = false
    },
    prop () {
      this.eduIf = !this.eduIf
    },
    notEmpty (val) {
      const re = new RegExp('^[ ]+$') //正则，去除空字符。匹配是否为空
      return !(val == null || val === '' || typeof (val) === 'undefined' || re.test(val))
    },
    saveEducation () {
      if (!this.notEmpty(this.ycUserEducation.school)) {
        return Toast('请输入毕业院校')
      }
      if (!this.notEmpty(this.ycUserEducation.professional)) {
        return Toast('请输入所属专业')
      }
      if (!this.notEmpty(this.ycUserEducation.admissionTime)) {
        return Toast('请选择入学时间')
      }
      if (!this.notEmpty(this.ycUserEducation.graduationTime)) {
        return Toast('请选择毕业时间')
      }
      if (!this.notEmpty(this.ycUserEducation.eduBgd)) {
        return Toast('请选择学历学位')
      }
      this.$http({
        method: 'post',
        data: {
          resumeId: this.resumeId,
          school: this.ycUserEducation.school,
          id: this.ycUserEducation.id,
          professional: this.ycUserEducation.professional,
          graduationTime: this.ycUserEducation.graduationTime,
          admissionTime: this.ycUserEducation.admissionTime,
          description: this.ycUserEducation.description,
          eduBgd: this.ycUserEducation.eduBgd
        },
        url: this.AppURL + '/userEducation/save'
      }).then(({data}) => {
        if (data && data.code == 0) {
          alert("保存成功")
          this.$router.push('/usersResume')
        }
      })
    },
    init () {
      this.resumeId = this.$route.query.resumeId

      this.$http({
        url: this.AppURL + '/userEducation/getEduBgd',
        method: 'get'
      }).then(({data}) => {
        this.eduLimit[0].values = data.eduBgd
      })


      this.$http({
        method: 'get',
        params: {},
        url: 'api/userEducation/queryByResumeId/' + this.resumeId
      }).then(({data}) => {
        if (data.userEducation != null) {
          this.resumeId = data.userEducation.resumeId
          this.ycUserEducation.school = data.userEducation.school
          this.ycUserEducation.id = data.userEducation.id
          this.ycUserEducation.professional = data.userEducation.professional
          this.ycUserEducation.graduationTime = data.userEducation.graduationTime
          this.ycUserEducation.description = data.userEducation.description
          this.ycUserEducation.eduBgd = data.userEducation.eduBgd
          this.ycUserEducation.admissionTime = data.userEducation.admissionTime
          this.eduValue2 = data.userEducation.eduBgdName
        }
      })
    },
    back () {
      this.$router.go(-1) //返回上一层
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #fff;
}

.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}

.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.back {
  width: 14px;
  height: 14px;
}

.head div img {
  width: 20px;
  height: 20px;
}

.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}

.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.inpBox {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
}

.inpBox input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 14px;
  height: 30px;
  text-align: right;
}

.inpBox div {
  display: flex;
  align-items: center;
}

.inpBoxs {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.inpBoxs .inpBox {
  border: 0;
}

.inpBoxs textarea {
  width: 100%;
  height: 150px;
  margin-top: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
